<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../taofang/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../taofang/css/home.css">
</head>
<body>
<!--    导航栏begin-->
<%@ include file="../nav/headnav.jsp" %>
<!--导航栏end-->

<br>
<br>

<div class="container">
    <div class="row">

        <!--        左侧边栏begin-->
        <div class="col-md-4 col-sm-6" style="border: 2px solid black;background-color: #e6e6e6 " class="col-md-12">
            <%--           <form  class="navbar-form navbar-left" role="search">--%>
            <!--            搜索框begin-->

            <div class="form-group">
                <h4 style="font-weight: 900">合租</h4>
                <div class="row">
                    <div class="col-md-9">
                        <input type="text" value="${sea}" class="form-control" placeholder="请输入户型" id="search_input">
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-default" id="search_btn">搜索</button>
                    </div>
                </div>
            </div>
            <%--            </form>--%>
            <!--                搜索框end-->

            <br>
            <br>
            <form class="navbar-form navbar-left" role="search">
                <div class="row">
                    <div class="col-md-6 col-sm-6">
                        <h4>区域找房：</h4>
                    </div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" class="btn btn-info btn-md">
                            <span class="glyphicon glyphicon-map-marker"></span> 苏州
                        </a>
                    </div>
                </div>

                <br>
                <br>

                <!--            <div class="row">-->
                <!--                <div class="col-md-3 col-sm-6">-->
                <h4>选位置:</h4>

                <!--精细查找begin-->

                <%--    <form role="form" id="form_check">--%>
                <div class="form-group">
                    <div class="col-md-12">
                        <!--                            <div class="col-md-4">-->

                        <div style="float: left;width: 30%;">
                            <select name="input_province" id="input_province" class="form-control" disabled="disabled">
                                <option value="">江苏省</option>
                            </select>
                        </div>
                        <div style="float: left;width: 30%;margin-left: 5%">
                            <select name="input_city" id="input_city" class="form-control" disabled="disabled">
                                <option value="">苏州市</option>
                            </select>
                            <!--                            </div>-->
                            <!--                        </div>-->
                        </div>

                        <div style="float: left;width: 30%;margin-left: 5%">
                            <select name="input_area" id="input_area" class="form-control">

                                <option class="ss">选择区</option>
                                <option class="ss">姑苏区</option>
                                <option class="ss">虎丘区</option>
                                <option class="ss">吴中区</option>
                                <option class="ss">相城区</option>
                                <option class="ss">吴江区</option>
                                <option class="ss">常熟市</option>
                                <option class="ss">昆山市</option>
                                <option class="ss">太仓市</option>
                                <option class="ss">工业园区</option>
                                <option class="ss">张家港</option>
                            </select>
                        </div>

                        <!--精细查找end-->
                    </div>
                </div>

                <br>
                <br>
                <br>
                <h4>搜索栏：</h4>

                <!--            搜索栏begin-->
                <div class="login_div">

                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#home" data-toggle="tab">
                                热门推荐
                            </a>
                        </li>
                        <li><a href="#ios" data-toggle="tab">搜索历史</a></li>
                        <li class="dropdown">
                            <a href="#" id="myTabDrop1" class="dropdown-toggle"
                               data-toggle="dropdown">精细搜索
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">配套设施</a></li>
                                <li><a href="#ejb" tabindex="-1" data-toggle="tab">意向选择</a></li>
                                <li><a href="#ejb" tabindex="-1" data-toggle="tab">基本信息</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <div class="row">
                                <c:forEach items="${page.list}" var="p" begin="2" end="3">
                                    <div class="col-sm-6 col-md-6">
                                        <div class="thumbnail" style="height: 80%" onclick="myimg(${p.id})">
                                            <img src="../../taofang/img/t1.jpg" alt="通用的占位符缩略图" >
                                            <div class="caption">
                                                <p style="text-align: center">
                                                    <span>合租·</span>${p.houseType}<span>/${p.area}</span>
                                                    <span class="text-danger">优惠价:${p.rentMoney}元/月</span>
                                                    <span>地区：${p.region}</span>
                                                    <span>朝向：${p.orientate}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="ios">
                            <p></p>
                        </div>
                        <div class="tab-pane fade" id="jmeter">


                            <div id="facility">
                                <form class="huan" role="search">
                                    <div class="zf22">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box1" value="op1">冰箱
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box2" value="op2">电视
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box3" value="op3">空调
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box4" value="op4">热水器
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box5" value="op5">洗衣机
                                        </label>
                                    </div>
                                    <div class="zf22">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box6" value="op6">宽带
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box7" value="op7">沙发
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box8" value="op8">阳台
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box9" value="op9">燃气灶
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box10" value="op10">油烟机
                                        </label>
                                    </div>
                                    <div class="zf22">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box11" value="op11">衣柜
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box12" value="op12">暖气
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box13" value="op13">床&nbsp;&nbsp;&nbsp;&nbsp;
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="box14" value="op14"> 智能门锁
                                        </label>
                                    </div>
                                    <hr>
                                    <div class="zf2">
                                        周边环境(多选):
                                    </div>
                                    <div class="zf22">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxa" value="opa">绿化多
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxb" value="opb">学区房
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxc" value="opc">可做饭
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxd" value="opd">独立卫生间
                                        </label>
                                    </div>
                                    <div class="zf22">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxe" value="ope">交通便利
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" id="boxf" value="opf">购物方便
                                        </label>
                                    </div>
                                    <button class="btn btn-primary btn-md" type="button" data-toggle="modal"
                                            onclick="sub3()" data-target="#myModal3">
                                        确定所选条件
                                    </button>
                                </form>

                            </div>


                        </div>
                        <div class="tab-pane fade" id="ejb">
                            <p>
                            </p>
                        </div>
                    </div>

                </div>
                <!--            搜索栏end-->
                <br>
                <br>
                <h4>全部：</h4>

                <!--            选价格begin-->

                <div style=" border: 2px solid black;border-radius: 5px">
                    <h5>选价格
                    </h5>
                </div>
                <div class="row" style="margin-top: 5%">

                    <div class="form-group">

                        <div class="row" id="danCheck">
                            <div class="col-md-6">
                                <label class="radio-inline" style="padding-left: 18.5%">
                                    <input type="radio" name="price" id="price1" value="0-1000">￥0-￥1000
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="price" id="price2" value="1001-1500">￥1001-￥1500
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="price" id="price3" value="1501-2000">￥1501-￥2000
                                </label>
                            </div>
                            <div class="col-md-6">
                                <label class="radio-inline" style="padding-left: 18.5%">
                                    <input type="radio" name="price" id="price4" value="2001-2500">￥2001-￥2500
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="price" id="price5" value="2501-3000">￥2501-￥3000
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="price" id="price6" value="3000-5000">￥3000-￥5000
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
                <%--    </form>--%>
                <!--            选价格end-->
                <br>
                <!--            选户型begin-->
                <div style=" border: 2px solid black;border-radius: 5px">
                    <h5>选户型
                    </h5>
                </div>
                <br>
                <div>

                    <div class="form-group" id="hu">

                        <div class="row">
                            <div class="col-md-4">
                                <label class="radio-inline">
                                    <input type="radio" name="type" id="type1" value="小户型">小户型
                                </label>
                            </div>
                            <div class="col-md-4">
                                <label class="radio-inline">
                                    <input type="radio" name="type" id="type2" value="中户型">中户型
                                </label>
                            </div>
                            <div class="col-md-4">

                                <label class="radio-inline">
                                    <input type="radio" name="type" id="type3" value="大户型">大户型
                                </label>
                            </div>
                        </div>

                    </div>

                </div>
                <!--      选户型end-->

                <!--            选方向begin-->
                <div style=" border: 2px solid black;border-radius: 5px">
                    <h5>选方向
                    </h5>
                </div>
                <br>
                <div id="chaoCheck" class="row">
                    <label class="radio-inline">
                        <input type="radio" name="chao" value="东"> 东
                    </label>
                    <label class="radio-inline" style="margin-left: 14%">
                        <input type="radio" name="chao" value="南"> 南
                    </label>
                    <label class="radio-inline" style="margin-left: 14.5%">
                        <input type="radio" name="chao" value="西"> 西
                    </label>
                    <label class="radio-inline" style="margin-left:14%">
                        <input type="radio" name="chao" value="北"> 北
                    </label>
                    <br>
                    <label class="radio-inline">
                        <input type="radio" name="chao" value="东南"> 东南
                    </label>
                    <label class="radio-inline" style="margin-left: 10%">
                        <input type="radio" name="chao" value="东北"> 东北
                    </label>
                    <label class="radio-inline" style="margin-left: 10%">
                        <input type="radio" name="chao" value="西南"> 西南
                    </label>
                    <label class="radio-inline" style="margin-left: 10%">
                        <input type="radio" name="chao" value="西北"> 西北
                    </label>
                </div>
                <!--            选方向end-->

                <!--         清除所选条件按钮begin-->
                <div style="text-align: center;margin-top: 10%">

                    <button class="btn btn-primary btn-md" type="button" data-toggle="modal" onclick="sub1()"
                            data-target="#myModal1">
                        确定所选条件
                    </button>

                    <button class="btn btn-primary btn-md" type="button" data-toggle="modal" onclick="sub2()"
                            data-target="#myModal2">
                        清除所选条件
                    </button>
                </div>
                <!--          清除所选条件按钮end-->
            </form>
        </div>
        <!--        左侧边栏end-->

        <%----%>

        <!--        右侧边栏begin-->
        <div id="content" class="col-md-8 col-sm-6">
            <div id="contenter">
                <div class="row">
                    <div class="col-md-6">
                        <h4 style="float: left">为您找到如下房源：
                        </h4>
                    </div>
                    <div class="col-md-6">
                        <a href="../../map/map1.html" class="btn btn-info btn-md" style="float:right;">
                            <span class="glyphicon glyphicon-map-marker"></span> 地图找房
                        </a>
                        <!--                    <h5 style="float: right"><a href="map1.html">地图找房</a></h5>-->
                    </div>
                </div>

                <!-- 缩略begin -->
                <div class="container-fluid" id="suolue" style="margin-top: 30px">

                    <div class="row">
                            <c:forEach items="${page.list}" var="p">
                                <div class="col-sm-6 col-md-6">
                                    <div class="thumbnail" onclick="myimg(${p.id})">
                                        <img src="../../taofang/img/t1.jpg" alt="通用的占位符缩略图" >
                                        <div class="caption">
                                            <h4 style="font-weight: 900;text-align: center">
                                                <span>合租·</span>${p.houseType}<span>/${p.area}</span></h4>
                                            <p style="text-align: center"><span class="text-danger"></span>优惠价:${p.rentMoney}元/月
                                                <span>地区：${p.region}</span>
                                                <span>朝向：${p.orientate}</span>
                                            </p>
                                        </div>

                                    </div>
                                </div>
                            </c:forEach>
                    </div>

                    <!-- 缩略图end -->
                    <!--         分页begin-->
                    <div style="text-align: center">
                        <ul class="pagination">


                            <li><a href="javascript:next_page(1)">首页</a></li>

                            <c:if test="${page.pageNum<=1}">
                                <li class="disabled"><a href="#">&laquo;</a></li>
                            </c:if>

                            <c:if test="${page.pageNum>1}">
                                <li><a href="javascript:next_page(${page.pageNum-1})">&laquo;</a></li>
                            </c:if>

                            <c:if test="${page.pageNum+2<=page.pages}">
                                <c:set var="endPage" value="${page.pageNum+2}"></c:set>
                                <c:set var="startPage" value="${page.pageNum}"></c:set>
                            </c:if>

                            <c:if test="${page.pageNum+2>page.pages}">
                                <c:set var="endPage" value="${page.pages}"></c:set>
                                <c:set var="startPage" value="${page.pages-2}"></c:set>
                            </c:if>

                            <c:forEach begin="${startPage<=0?1:startPage}" end="${endPage}" var="v">
                                <li <c:if test="${page.pageNum == v}">class="active"</c:if></li> <a href="javascript:next_page(${v})">${v}</a></li>
                            </c:forEach>


                            <c:if test="${page.pageNum<page.pages}">
                                <li><a href="javascript:next_page(${page.pageNum+1})">&raquo;</a></li>
                            </c:if>

                            <c:if test="${page.pageNum>=page.pages}">
                                <li class="disabled"><a href="#">&raquo;</a></li>
                            </c:if>


                            <li><a href="javascript:next_page(${page.pages})">尾页</a></li>
                            <li><a href="#">当前页${page.pageNum}/${page.pages}总页</a></li>
                        </ul>
                    </div>
                    <!--                分页end-->
                </div>
                <!--       右侧边栏end -->
                <!--        返回顶部begin-->
                <div class="float-right" style="float: right">
                    <a class="gotop d-none d-sm-block" href="javascript:scroll(0,0)"
                       style="text-decoration: none">返回顶部</a>
                </div>
                <!--        返回顶部end-->
            </div>
        </div>

    </div>
</div>

<br>
<br>
<br>
<!--底部导航栏begin-->
<%@ include file="../nav/footnav.jsp" %>
<!--底部导航栏end-->

<script src="../../taofang/plugins/jquery-3.4.1.js"></script>
<script src="../../taofang/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    function myimg(house_id){
        window.location="/taofang/Detail/hezuxiangxi.action?house_id="+house_id;
    }


    <%--    搜索框--%>
    $(function () {
        $("#search_btn").click(function () {
            let sea =  $("#search_input").val();
            // alert(sea)
            window.location="/taofang/House/Hezu.action?sea="+sea;
        });

    });

    //传值
    function zhuan() {
        let houseId = $("#house").val();
    }


    //分页
    function next_page(page) {
        // alert(page)

        let sea =  $("#search_input").val();

        window.location="/taofang/House/Hezu.action?sea="+sea+"&pageNow="+page;
    }


    function sub1(){

        let la = $("#input_area option:selected").text();
        var min = null;
        var max = null;

        //下拉框
        let lab = la =="选择区"?null:la;
        // alert(lab);
        //价格
        let che = $("#danCheck input:checked").val();
        if (che==undefined){
            min = null;
            max = null;
            // alert(min);
            // alert(max);
        }else {
            let chec = (che.split("-"));
            min = chec[0];
            max = chec[1];
            // alert(min);
            // alert(max);
        }

        let hu = $("#hu input:checked").val();
        let huType = hu==undefined?null:hu;
        // alert(huType);

        // let rent1 = document.getElementById("rent1").checked;
        let cha = $("#chaoCheck input:checked").val();
        let chao = cha==undefined?null:cha;
        // alert(chao);

        let datas = {"lab":lab,"min":min,"max":max,"huType":huType,"chao":chao,"pageNow":1};
        $.get("/taofang/House/HezuCheck.action",datas,function (data) {
            console.log(data.data)
            $("#content").load('/taofang/House/Hezu.action #contenter',datas);
            console.log(data.data)
        });

    }

    function sub2() {
        window.location="/taofang/House/Hezu.action";
    }

    function sub3() {
        let box1 = document.getElementById("box1").checked;
        let box2 = document.getElementById("box2").checked;
        let box3 = document.getElementById("box3").checked;
        let box4 = document.getElementById("box4").checked;
        let box5 = document.getElementById("box5").checked;
        let box6 = document.getElementById("box6").checked;
        let box7 = document.getElementById("box7").checked;
        let box8 = document.getElementById("box8").checked;
        let box9 = document.getElementById("box9").checked;
        let box10 =document.getElementById("box10").checked;
        let box11 =document.getElementById("box11").checked;
        let box12 =document.getElementById("box12").checked;
        let box13 =document.getElementById("box13").checked;
        let box14 =document.getElementById("box14").checked;
        let boxa = document.getElementById("boxa").checked;
        let boxb = document.getElementById("boxb").checked;
        let boxc = document.getElementById("boxc").checked;
        let boxd = document.getElementById("boxd").checked;
        let boxe = document.getElementById("boxe").checked;
        let boxf = document.getElementById("boxf").checked;
        let datas = {
            "box1": box1,
            "box2": box2,
            "box3": box3,
            "box4": box4,
            "box5": box5,
            "box6": box6,
            "box7": box7,
            "box8": box8,
            "box9": box9,
            "box10": box10,
            "box11": box11,
            "box12": box12,
            "box13": box13,
            "box14": box14,
            "boxa": boxa,
            "boxb": boxb,
            "boxc": boxc,
            "boxd": boxd,
            "boxe": boxe,
            "boxf": boxf,
            "pageNow": 1
        };


        $.get("/taofang/House/hezuHuan.action", datas, function (data) {
            console.log(data.data)
            $("#content").load('/taofang/House/hezufu.action #contenter', datas);
            console.log(data.data)
        });
    }



</script>
</body>
</html>